<template>
  <div class="je-admin-settings">
    <Header @changeHeaderUrl="changeHeaderUrl" @changeProver="changeProver"></Header>
    <!-- 历史菜单记录功能 -->
    <div class="je-admin-settings-history">
      <div class="history-box" @click="setPrevHistoryMenuEnable">
        <i
          :class="{
            'check-icon': true,
            'is-checked': prevHistoryMenuEnable,
            'fal fa-circle': !prevHistoryMenuEnable,
            'fas fa-circle-check': prevHistoryMenuEnable,
          }"
        ></i>
        <span class="title">{{ $t('settings.history') }}</span>
      </div>
    </div>
    <Theme></Theme>
    <div class="je-admin-settings-logout">
      <span class="logout-text" @click="onClick">
        <i class="logout-icon fal fa-power-off"></i>安全退出
      </span>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue';
  import Theme from './theme.vue';
  import { logout } from '@/helper/system';
  import { useRoute } from 'vue-router';
  import { useGlobalStore } from '@common/store/global-store';
  import { LayoutType } from '@/data/enum/layout';
  import Header from './header.vue';
  import { useMenuStore } from '@/stores/menu-store';
  import { computed } from 'vue';
  export default defineComponent({
    name: 'AdminSettings',
    components: {
      Theme,
      Header,
    },
    emits: ['changeHeaderUrl', 'changeProver'],
    setup(props, { emit }) {
      const route = useRoute();
      const globalStore = useGlobalStore();
      const menuStore = useMenuStore();
      const onClick = () => {
        // 单应用记录历史
        if (LayoutType.APP === route?.params?.layout) {
          globalStore.historyRoute = route?.fullPath;
        } else {
          globalStore.historyRoute = null;
        }
        // 退出
        logout();
      };
      const changeProver = () => {
        emit('changeProver');
      };
      const changeHeaderUrl = (fileKey) => {
        emit('changeHeaderUrl', fileKey);
      };
      const prevHistoryMenuEnable = computed(() => menuStore.prevHistoryMenuEnable);
      const setPrevHistoryMenuEnable = () => {
        menuStore.setPrevHistoryMenuEnable(!menuStore.prevHistoryMenuEnable);
      };
      return {
        onClick,
        changeHeaderUrl,
        changeProver,
        setPrevHistoryMenuEnable,
        prevHistoryMenuEnable,
      };
    },
  });
</script>
<style lang="less">
  .je-admin-settings {
    width: 300px;
    & &-logout {
      margin-top: 10px;
      border-top: 1px solid #f5f5f5;
      text-align: center;
      padding: 15px 0 3px;
      .logout-text {
        cursor: pointer;
        color: @text-color;
        font-size: 14px;
        &:hover {
          color: @primary-color;
        }
      }
      .logout-icon {
        margin-right: 10px;
      }
    }

    & &-history {
      padding-top: 20px;
      text-align: center;
      .history-box {
        font-size: 14px;
        display: inline-block;
        cursor: pointer;
        .title {
          padding: 0 6px;
        }
        .check-icon.is-checked {
          color: @primary-color;
        }
        .help-icon {
          visibility: hidden;
        }
        &:hover {
          .title,
          .help-icon {
            color: @primary-color;
          }
          .help-icon {
            visibility: visible;
          }
        }
      }
    }
  }
</style>
